<!-- AI对话输入区域 -->
<div class="flex flex-col h-full">
    <!-- 对话头部 -->
    <div class="p-4 border-b border-gray-100 bg-gray-50">
        <div class="flex items-center justify-between">
            <h2 class="text-lg font-medium text-gray-900">AI 助手</h2>
            <div class="flex items-center space-x-3">
                <!-- AI状态指示器 -->
                <div class="flex items-center space-x-1">
                    <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
                    <span class="text-xs text-gray-600">在线</span>
                </div>
                <!-- 清除按钮 -->
                <button 
                    @click="clearConversation()"
                    class="text-sm text-gray-500 hover:text-gray-700 flex items-center space-x-1"
                    title="清除对话"
                >
                    <i class="fas fa-broom text-xs"></i>
                    <span>清除</span>
                </button>
            </div>
        </div>
        <p class="text-sm text-gray-600 mt-1">描述您的文章需求，我来帮您创作</p>
    </div>

    <!-- 对话历史区域 -->
    <div class="flex-1 overflow-y-auto p-4 space-y-3" id="conversation-area">
        <!-- 欢迎消息 -->
        <div x-show="conversation.length === 0" class="text-center py-8">
            <div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fas fa-robot text-white text-lg"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">👋 您好！我是AI写作助手</h3>
            <p class="text-sm text-gray-600 mb-4">请告诉我您想要创作什么样的文章，我会为您：</p>
            <div class="text-left max-w-xs mx-auto">
                <div class="space-y-2 text-sm text-gray-600">
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-check text-green-500 text-xs"></i>
                        <span>分析您的需求</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-check text-green-500 text-xs"></i>
                        <span>制定文章大纲</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-check text-green-500 text-xs"></i>
                        <span>生成专业内容</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <i class="fas fa-check text-green-500 text-xs"></i>
                        <span>优化文章质量</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 对话消息 -->
        <template x-for="message in conversation" :key="message.id">
            <div>
                <!-- 用户消息 -->
                <div x-show="message.type === 'user'" class="flex justify-end mb-3">
                    <div class="flex items-start space-x-2 max-w-xs">
                        <div class="px-4 py-3 rounded-2xl rounded-br-sm bg-primary text-white text-sm leading-relaxed">
                            <div x-text="message.content"></div>
                            <div class="text-xs opacity-75 mt-1" x-text="message.timestamp"></div>
                        </div>
                        <div class="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                    </div>
                </div>

                <!-- AI消息 -->
                <div x-show="message.type === 'ai'" class="flex justify-start mb-3">
                    <div class="flex items-start space-x-2 max-w-xs">
                        <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
                            <i class="fas fa-robot text-white text-sm"></i>
                        </div>
                        <div class="px-4 py-3 rounded-2xl rounded-bl-sm bg-gray-100 text-gray-800 text-sm leading-relaxed">
                            <div x-html="message.content"></div>
                            <div class="text-xs opacity-75 mt-1" x-text="message.timestamp"></div>
                        </div>
                    </div>
                </div>

                <!-- 系统消息 -->
                <div x-show="message.type === 'system'" class="flex justify-center mb-3">
                    <div 
                        class="px-3 py-2 rounded-lg text-xs font-medium border-l-4 max-w-sm w-full"
                        :class="getSystemMessageStyle(message.subType)"
                    >
                        <div class="flex items-center space-x-2">
                            <i :class="getSystemMessageIcon(message.subType)" class="flex-shrink-0"></i>
                            <div class="flex-1">
                                <div x-html="message.content"></div>
                                <div class="text-xs opacity-75 mt-1" x-text="message.timestamp"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 进度消息 -->
                <div x-show="message.type === 'progress'" class="flex justify-center mb-3">
                    <div class="bg-gradient-to-r from-purple-50 to-blue-50 border border-purple-200 rounded-lg p-3 max-w-sm w-full">
                        <div class="flex items-center space-x-2 mb-2">
                            <div class="w-4 h-4 bg-purple-500 rounded-full flex items-center justify-center">
                                <i class="fas fa-cog fa-spin text-white text-xs"></i>
                            </div>
                            <span class="text-sm font-medium text-purple-800">执行进度</span>
                            <span class="text-xs text-purple-600 ml-auto" x-text="message.progress + '%'"></span>
                        </div>
                        <div class="w-full bg-purple-200 rounded-full h-2 mb-2">
                            <div 
                                class="bg-gradient-to-r from-purple-500 to-blue-500 h-2 rounded-full transition-all duration-500"
                                :style="`width: ${message.progress}%`"
                            ></div>
                        </div>
                        <div class="text-xs text-purple-700" x-html="message.content"></div>
                        <div class="text-xs text-purple-600 mt-1" x-text="message.timestamp"></div>
                    </div>
                </div>

                <!-- 状态更新消息 -->
                <div x-show="message.type === 'status'" class="flex justify-center mb-3">
                    <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-lg p-3 max-w-sm w-full">
                        <div class="flex items-center space-x-2">
                            <div class="w-4 h-4 bg-blue-500 rounded-full flex items-center justify-center">
                                <i class="fas fa-info-circle text-white text-xs"></i>
                            </div>
                            <div class="flex-1">
                                <div class="text-sm font-medium text-blue-800">状态更新</div>
                                <div class="text-xs text-blue-700" x-html="message.content"></div>
                                <div class="text-xs text-blue-600 mt-1" x-text="message.timestamp"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        <!-- AI正在输入提示 -->
        <div x-show="isGenerating" class="flex justify-start">
            <div class="flex items-start space-x-2">
                <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-robot text-white text-sm"></i>
                </div>
                <div class="bg-gray-100 px-4 py-3 rounded-2xl rounded-bl-sm">
                    <div class="flex items-center space-x-2">
                        <div class="flex space-x-1">
                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.1s"></div>
                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                        </div>
                        <span class="text-sm text-gray-600">AI正在思考...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 输入区域 -->
    <div class="border-t border-gray-100 p-4">
        <form @submit.prevent="sendMessage()" class="space-y-3">
            <!-- 快捷提示 -->
            <div x-show="conversation.length === 0" class="mb-3">
                <p class="text-xs text-gray-500 mb-2">💡 快捷开始：</p>
                <div class="flex flex-wrap gap-2">
                    <button 
                        type="button"
                        @click="setQuickPrompt('写一篇关于人工智能的技术文章')"
                        class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-xs transition-colors"
                    >
                        AI技术文章
                    </button>
                    <button 
                        type="button"
                        @click="setQuickPrompt('产品使用说明书')"
                        class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-xs transition-colors"
                    >
                        使用说明
                    </button>
                    <button 
                        type="button"
                        @click="setQuickPrompt('市场分析报告')"
                        class="px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full text-xs transition-colors"
                    >
                        分析报告
                    </button>
                </div>
            </div>

            <!-- 消息输入框 -->
            <div class="relative">
                <textarea 
                    x-model="currentMessage"
                    @keydown.enter.prevent="if(!$event.shiftKey) sendMessage()"
                    placeholder="描述您的文章需求... (Enter发送，Shift+Enter换行)"
                    rows="3"
                    class="w-full px-4 py-3 pr-12 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent resize-none text-sm"
                    :disabled="isGenerating"
                ></textarea>
                
                <!-- 发送按钮 -->
                <button 
                    type="submit"
                    :disabled="!currentMessage.trim() || isGenerating"
                    class="absolute bottom-2 right-2 w-8 h-8 bg-primary text-white rounded-lg flex items-center justify-center hover:bg-secondary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    <i class="fas fa-paper-plane text-sm"></i>
                </button>
            </div>

            <!-- 输入提示 -->
            <div class="flex items-center justify-between text-xs text-gray-500">
                <span>Enter 发送 • Shift+Enter 换行</span>
                <span x-text="currentMessage.length + '/2000'"></span>
            </div>
        </form>
    </div>
</div> 